<template>
  <div>
    <!-- 头部导航
    $router.back() 返回上一个路由路径
     -->
    <van-nav-bar title="精彩评论" left-arrow @click-left="$router.back()" />
    <!-- 评论列表 -->
    <div class="item" v-for="item in commentList" :key="item.id">
      <div class="head">
        <img :src="item.user.head_img|joinPath" alt />
        <div>
          <p>{{item.user.nickname}}</p>
          <span>{{ item.create_date }}</span>
        </div>
        <span @click="replyFn(item.id)">回复</span>
      </div>
      <!-- 写嵌套评论 star -->
        <commentItem @reply="replyFn" 
        v-if="item.parent" 
        :obj="item.parent"></commentItem>
      <!-- 写嵌套评论 end -->
      <div class="text">{{ item.content }}</div>
    </div>
    <!-- 底部评论块，需将文章详情数据传递给底部评论块组件 -->
    <commentFooter ref="commentfooter" @updateComment="updateCommentList" :obj="articleData"></commentFooter>
  </div>
</template>

<script>
import commentFooter from "@/components/commentFooter.vue";
import { post_comment,articleDetail } from "@/api/news.js";
import commentItem from "@/components/commentItem.vue"
export default {
  components: { commentFooter,commentItem },
  data(){
      return {
          commentList: [], // 评论列表
          articleData: {},  // 文章详情数据
      }
  },
  created(){
    let id = this.$route.query.id;
    //   获取文章详情数据
    articleDetail(id).then(res=>{
        // console.log(39,res);
        this.articleData = res.data.data;
    })
    //   获取并保存评论列表数据
    post_comment(id).then(res=>{
        // console.log(33,res);
        this.commentList = res.data.data;
    })
  },
  methods: {
    // 回复评论
    replyFn(id){
      // 1、调用底部评论块组件中showCommentBox函数，从而实现文本域等内容的显示
      // 如何能够调用组件中showCommentBox函数呢？答：可以先获取到该组件对象
      // 如何获取到该组件对象呢？答：通过ref属性获取
      let footer = this.$refs.commentfooter;
      console.log(59,footer);
      footer.showCommentBox();
      // 把回复的id赋值给子组件中的parent_id
      footer.parent_id = id;
    },
    // 更新评论列表数据
    updateCommentList(){
      let id = this.$route.query.id;
      //   获取并保存评论列表数据
      post_comment(id).then(res=>{
          // console.log(33,res);
          this.commentList = res.data.data;
      })
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar {
  border-bottom: 1px solid #ddd;
  .van-icon {
    color: #000;
  }
}
.item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    > img {
      width: (50/360) * 100vw;
      height: (50/360) * 100vw;
      display: block;
      border-radius: 50%;
    }
    > div {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-left: 10px;
      > span {
        font-size: 12px;
        color: #999;
        line-height: 25px;
      }
    }
    > span {
      color: #999;
      font-size: 13px;
    }
  }
  .text {
    font-size: 14px;
    color: #333;
    padding: 20px 0 10px 0;
  }
}



</style>